<script setup>
import { useSlots, ref } from "vue"
import noData from "./noData.vue"
const props = defineProps({
  tableHeader: {
    type: Array,
    required: true,
    default: () => [],
  },
  tableData: {
    type: Array,
    required: true,
    default: () => [],
  },
  isHead: {
    type: Boolean,
    default: true,
  },
  isPage: {
    type: Boolean,
    default: false,
  },
  layout: {
    type: String,
    default: "pager, ",
  },
})
// 分页
let page = ref(1)
let size = ref(4)

const slots = useSlots()
const hasSlot = (prop) => {
  return !!slots[`${prop}`]
}

const emits = defineEmits(["changeSize", "changePage"])

// 每页条数改变
const handleSizeChange = (val) => {
  emits("changeSize", val)
}

// 页数改变
const handleCurrentChange = (val) => {
  emits("changePage", val)
}
// 跳转页数
const goToPage = (val) => {
  if (val === "last") {
    page.value = Math.ceil(props.tableData.length / size.value)
  } else {
    page.value = val
  }
}
</script>

<template>
  <div class="container">
    <div class="parameter-table" v-if="tableData.length > 0">
      <table>
        <thead v-if="isHead">
          <tr class="tableHeader">
            <th v-for="(header, index) in tableHeader" :key="index">
              {{ header.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <td v-for="(header, colIndex) in tableHeader" :key="colIndex">
              <template v-if="hasSlot(header.props)">
                <slot
                  :name="`${header.props}`"
                  :row="row"
                  :index="rowIndex"
                ></slot>
              </template>
              <template v-else>
                {{ row[header.props] }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <noData v-else></noData>
    <div v-if="isPage" class="pagination">
      <div class="page-container">
        <div class="pagebtn" @click="goToPage(1)"><< 第一页</div>
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          background
          popper-class="e"
          :layout="layout"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
        <div class="pagebtn" @click="goToPage('last')">尾页 >></div>
      </div>

      <!-- <div class="pagination-total-info">
        共<span class="pagination-total-number">{{ 4 }}</span
        >条数据
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 6px;
}

.table-title {
  color: #e9f1fb;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.parameter-table {
  margin: 0px 0 5px 0;
  background-color: rgb(17, 51, 94, 0.5);
}

table {
  width: 100%;

  thead {
    tr {
      border: 1px solid #2e3a59;
    }

    th {
      background: rgb(17, 51, 94, 0.3);
    }
  }

  td,
  th {
    text-align: left;
    font-family: Alibaba;
    font-weight: normal;
    font-size: 16px;
    color: #d8e2ff;
    border-bottom: 1px solid #2e3a59;
    padding: 14px 20px;
  }

  tbody {
    tr:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}
.pagination {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  :deep(.page-container) {
    display: flex;
    gap: 12px;
    align-items: center;
    .pagebtn {
      cursor: pointer;
      padding: 9px 19px 10px 19px;
      font-weight: 500;
      font-size: 16px;
      color: #cccccc;
      background: #023665;
      border-radius: 10px 10px 10px 10px;
    }
    .el-pager {
      height: 43px;
      border-radius: 3px 3px 3px 3px;
      border: 3px solid #023665;
      .number {
        width: 51px;
        height: 43px;
        font-size: 16px;
        color: #cccccc;
        background: transparent;
        &.is-active {
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #44e4f9;
          background: #023665;
        }
      }
    }
    .el-pagination.is-background .el-pager li {
      margin: 0;
    }
  }
}
</style>
